<template>
  <div class="login">
    <div style="height: 1px;width: 100%"></div>
    <div class="formWrap">
      <p>账号密码登录</p>
      <a-form-model :model="form" :wrapper-col="{span: 10}" :rules="rules" ref="ruleForm">
        <a-form-model-item label="" prop="username">
          <a-input v-model="form.username" size="large" style="text-align: left" placeholder="手机号码或邮箱"/>
        </a-form-model-item>
        <a-form-model-item label="" prop="password">
          <a-input-password v-model="form.password" size="large" placeholder="密码"/>
          <p
            style="cursor: pointer;font-size: 16px;margin-bottom: 0px;color: #1890ff;display: flex;justify-content: space-between;align-items: center">
            <span @click="resetPassWord">忘记密码</span>
            <span @click="zhucePage" style="margin-left: 10px">注册</span>
          </p>
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" size="large" style="width: 250px;" @click="loginIn('ruleForm')">登录</a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
    <div style="height: 1px;width: 100%"></div>
  </div>
</template>

<script>
  import {
    loginToken,
    refreshToken
  } from "../serves";
  import {
    setLocalStorage,
    getLocalStorage,
    removeLocalStorage
  } from "../serves/localStorage"
  import {
    eventBus
  } from '@/eventBus';

  export default {
    name: "login",
    data() {
      const validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码！'))
        } else {
          callback()
        }
      }
      const validateName = (rule, value, callback) => {
        let reg1 = /^1[0-9]{10}$/;
        let reg2 = /^([a-zA-Z\d])(\w|)+@[a-zA-Z\d]+\.[a-zA-Z]{2,4}$/;
        if (value === '') {
          callback(new Error('请输入手机号码或邮箱号！'))
        } else if (!reg1.test(value) && !reg2.test(value)) {
          callback(new Error('手机号码或邮箱错误，请重新输入！'))
        } else {
          callback()
        }
      }
      return {
        form: {
          password: '',
          username: ''
        },
        checked: true,
        rules: {
          password: [{
            validator: validatePass,
            trigger: 'change'
          }],
          username: [{
            validator: validateName,
            trigger: 'change'
          }]
        },
      }
    },
    mounted() {
      if (getLocalStorage('userName')) {
        this.form.username = getLocalStorage('userName')
      }
    },
    methods: {
      zhucePage() {
        this.$router.push('register')
      },
      resetPassWord() {
        this.$router.push('forgetPwdCode')
      },
      loginIn(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            loginToken(this.form).then(res => {
              if (res.status == 200 && res.data.status.code == 200) {
                setLocalStorage('accessToken', res.data.data.accessToken)
                setLocalStorage('refreshToken', res.data.data.refreshToken)
                eventBus.$emit('isShow', true)
                setLocalStorage('userName', this.form.username)
                this.$message.success('登录成功！')
                this.$router.push({
                  path: '/personCenter'
                })
              } else {
                removeLocalStorage('accessToken')
                removeLocalStorage('refreshToken')
                this.$message.warning(res.data.message)
              }
            }).catch(el => {
              console.log(el);
            })
          }
        })
      }
    },

  }
</script>

<style lang="scss">
  .login {
    background-color: #f2f2f2;

    .formWrap {
      margin: 100px 300px;
      background-color: #fff;
      padding: 50px;

      > p {
        font-size: 26px;
        font-weight: 700;
      }

      .ant-form-item {
        display: flex;
        justify-content: center;
      }

      .ant-input-group-compact {
        display: flex;
      }
    }
  }

  @media screen and (max-width: 800px) {
    .login {
      .formWrap {
        margin: 0px;
        padding: 100px 50px 300px;
      }
    }
  }
</style>
